<!--  -->
<style lang="scss" scoped></style>
<template>
  <div
    class="bg-black bg-opacity-[.3] h-[100vh] flex justify-center items-center"
  >
    <div class="p-3 w-[500px] bg-white rounded-xl">
      <n-card
        title="登录"
        header-style="font-size:22px"
        :bordered="false"
        size="huge"
        role="dialog"
        aria-modal="true"
      >
        <div class="mt-6">
          <n-form
            ref="formRef"
            :model="formValue"
            :rules="rules"
            :show-label="false"
          >
            <n-form-item path="username">
              <n-input
                placeholder="用户名"
                size="large"
                v-model:value="formValue.username"
              >
                <template #prefix>
                  <n-icon :component="PhonePortraitOutline" />
                </template>
              </n-input>
            </n-form-item>

            <n-form-item path="password">
              <n-input
                placeholder="密码"
                size="large"
                type="password"
                v-model:value="formValue.password"
              >
                <template #prefix>
                  <n-icon :component="BarcodeOutline" />
                </template>
              </n-input>
            </n-form-item>
          </n-form>
          <div class="mt-6 pb-8">
            <n-button
              block
              type="primary"
              :disabled="loading"
              size="large"
              @click="loginSubmit"
            >
              <n-spin v-show="loading" stroke="#fff" :size="20" />
              <span class="ml-1">登录</span>
            </n-button>
          </div>
        </div>
      </n-card>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { FormInst, FormItemRule } from 'naive-ui'
import { PhonePortraitOutline, BarcodeOutline } from '@vicons/ionicons5'
import { ref } from 'vue'
// import apis from '@/api/user'
// import { useRouter } from 'vue-router'

// const router = useRouter()
const formRef = ref<FormInst | null>(null)
const formValue = ref({
  username: '',
  password: ''
})
const rules = {
  username: {
    validator(rule: FormItemRule, value: string) {
      if (!value) {
        return new Error('请输入用户名')
      }
      return true
    },
    trigger: ['change', 'blur']
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: ['change', 'blur']
  }
}
const loading = ref<boolean>(false)
const loginSubmit = (e: MouseEvent) => {
  e.preventDefault()
  formRef.value?.validate((errors) => {
    if (!errors) {
      window.location.href = '/'
      // apis
      //   .login({
      //     phone: formValue.value.phone,
      //     code: formValue.value.code,
      //     type: 'sign'
      //   })
      //   .loading((status: boolean) => {
      //     loading.value = status
      //   })
      //   .success((data) => {
      //     localStorage.setItem('token', data)
      //     router.go(0)
      //     setNeedLogin(false)
      //     setLoginStatus(true)
      //     setUserPhone(formValue.value.phone)
      //   })
    }
  })
}
</script>
